//详情页
//localStorage 的id信息
const id = window.localStorage.getItem('id')

const infoBox = document.querySelector('.info')

getGood()
async function getGood(){
    const res = await $.ajax({
        url:'./js/json/new.json',
        dataType:'json',
    })

    const info = res.data.filter(item =>{return item.id == id})[0]
    //渲染页面
    infoBox.innerHTML = `
    <div class="cont">
    <img src="${info.verticalPic}" alt="">
</div>
<div class="order">
    <div class="title">
        <span class="tip">总票代</span>
        <span class="passage">${info.name}</span>
    </div>
    <div class="dingwei">
        <p class="time">${info.showTime}</p>
        <p class="place">${info.venueName}
            <a href="">
                <img src="./images/定位-01.png" alt="">
            </a>
        </p>
    </div>

    <div class="no-time">
        <div class="showtime">
            <a href=""><img src="./images/i.png" alt=""></a>
            场次时间均为演出当地时间
        </div>
        <div class="performs">
            <span class="left">场次</span>
            <div class="list">
                <span>2021-08-21 周六 20:00</span>
            </div>
        </div>

        <div class="select">
            <span class="select-lef">票档</span>
            <div class="select-rig">
                <span class="list-lef">${info.prices}元</span>
                <span class="list-rig">${info.VIPprices}元</span>
            </div>
        </div>

        <div class="order-price">
            <div class="order-lef">数量</div>
            <div class="order-rig">
                <button data-id="${info.id}" class="numSub" >-</button>
                <input type="text" value="${info.isNewItem}">
                <button data-id="${info.id}" class="numAdd">+</button>
                <span class="right">每笔订单限购6张</span>
            </div>
        </div>
        <div class="per-price">
            <div class="num-left">合计</div>
            <div class="num-right">
                <span class="totel">
                    <i>￥</i>     
                    ${info.prices}
                </span>
                <span class="go-login">登录后查看是否享受优惠</span>
            </div>
        </div>

        <div class="buy" data-id="${info.id}" >
            立即购买
        </div>
    </div>
</div>
    `
    //获取购物车增加
    const Lef = document.querySelector('.lef')
    Lef.onclick = async function(e){
        e = e || window.event
        const target = e.target || e.srcElement

        if(target.className === 'numAdd'){
            let num = target.previousElementSibling.value;
            if(num < 6) {
                num++;                
                info.isNewItem++;
                target.previousElementSibling.value = num;
            }       
            // window.localStorage.setItem("btns")
            // getList(btns.cart_number)
        }

        //减一次
        if(target.className ==="numSub") {
            num = target.nextElementSibling.value;
            if(num > 1) {
                num--;
                info.isNewItem--;
                target.nextElementSibling.value = num;
            }     
        }

        if(target.className ==="buy"){
            const id = target.dataset.id 
                goodsList = res.data
                const goods = goodsList.find(item => item.id === id)

                const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
                
                const cartGoods = cartList.find(item => item.id === id)
                if(cartGoods){
                    cartGoods.number++
                }else{
                    goods.number = 1
                    cartList.push(goods)
                }
                
                window.localStorage.setItem('cart',JSON.stringify(cartList))
                getList()
        //跳转页面
        window.location.href = './cart.html'
        }
         
    }
}


//获取头部搜索框事件
const search = document.querySelector('.cen > input')
const  box = document.querySelector('.cen > ol')

search.oninput = function(){
    const text = this.value

    const script = document.createElement('script')
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=' + text +'&req=2&csor=2&pwd=%E7%88%B1%E5%A5%87%E8%89%BA&cb=fn&_=1624513627828'
    document.body.appendChild(script)

    script.remove()
}
function fn(res){
    if(!res.g){
        //表示res 内没有 g 这个数据
        //让ol隐藏
        box.style.display = 'none'
        return
    }
    //表示 res 内 是一个数组 循环数组 让ol显示
    let Str = ''
    res.g.forEach(item =>{
        Str += `<li>${item.q}</li>`
    })
    box.innerHTML = Str
    box.style.display = 'block'
}


getList()
async function getList(){
    const reft = await $.ajax({
        url:'./js/json/resultData.json',
        dataType:'json',
    })

    const btns = reft.resultData.filter(item =>{return item.id == id})[0]
    //渲染页面
    infoBox.innerHTML = `
    <div class="cont">
            <img src="${btns.verticalPic}" alt="">
        </div>
        <div class="order">
            <div class="title">
                <span class="tip">总票代</span>
                <span class="passage">${btns.name}</span>
            </div>
            <div class="dingwei">
                <p class="time">${btns.showtime}</p>
                <p class="place">${btns.venue}
                    <a href="">
                        <img src="./images/定位-01.png" alt="">
                    </a>
                </p>
            </div>

            <div class="no-time">
                <div class="showtime">
                    <a href=""><img src="./images/i.png" alt=""></a>
                    场次时间均为演出当地时间
                </div>
                <div class="performs">
                    <span class="left">场次</span>
                    <div class="list">
                        <span>${btns.showtime}</span>
                    </div>
                </div>

                <div class="select">
                    <span class="select-lef">票档</span>
                    <div class="select-rig">
                        <span class="list-lef">${btns.price}元</span>
                        <span class="list-rig">${btns.pricehigh}元</span>
                    </div>
                </div>

                <div class="order-price">
                    <div class="order-lef">数量</div>
                    <div class="order-rig">
                        <button data-id="${btns.id}" class="numSub" >-</button>
                        <input type="text" value="${btns.cart_number}">
                        <button data-id="${btns.id}" class="numAdd">+</button>
                        <span class="right">每笔订单限购6张</span>
                    </div>
                </div>
                <div class="per-price">
                    <div class="num-left">合计</div>
                    <div class="num-right">
                        <span class="totel">
                            <i>￥</i>     
                            ${btns.price}
                        </span>
                        <span class="go-login">登录后查看是否享受优惠</span>
                    </div>
                </div>

                <div class="buy" data-id="${btns.id}" >
                    立即购买
                </div>
            </div>
        </div>
    `
    //获取购物车增加
    const Lef = document.querySelector('.lef')
    Lef.onclick = async function(e){
        e = e || window.event
        const target = e.target || e.srcElement

        if(target.className === 'numAdd'){
            let num = target.previousElementSibling.value;
            if(num < 6) {
                num++;                
                btns.cart_number++;
                target.previousElementSibling.value = num;
            }       
            // window.localStorage.setItem("btns")
            // getList(btns.cart_number)
        }

        //减一次
        if(target.className ==="numSub") {
            num = target.nextElementSibling.value;
            if(num > 1) {
                num--;
                btns.cart_number--;
                target.nextElementSibling.value = num;
            }     
        }

        if(target.className ==="buy"){
            const id = target.dataset.id 
                goodsList = reft.resultData
                const goods = goodsList.find(item => item.id === id)

                const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
                
                const cartGoods = cartList.find(item => item.id === id)
                if(cartGoods){
                    cartGoods.number++
                }else{
                    goods.number = 1
                    cartList.push(goods)
                }
                window.localStorage.setItem('cart',JSON.stringify(cartList))
                getList()
        //跳转页面
        window.location.href = './cart.html'
        }
         
    }
}


